<template>
  <div>
    <h2>App</h2>
    <label>
      <input type="text">
    </label>---
    <label>
      <input type="text" ref="inputRef">
    </label>
  </div>
</template>

<script lang="ts">
import {reactive, toRefs, onMounted, ref} from 'vue'

export default {
  name: "ToRefs",
  setup() {

    const inputRef = ref<HTMLElement | null>(null)
    onMounted(() => {
      inputRef.value && inputRef.value.focus()
    })
    const mystate = reactive({
      foo: 'a',
      bar: 'b',
    })
    console.log(mystate)
    // 响应对象转换为普通对象
    const stateAsRefs = toRefs(mystate)
    console.log(stateAsRefs)
    console.log(stateAsRefs.bar.value)
    console.log(stateAsRefs.foo.value)
    setTimeout(() => {
      mystate.foo += '++'
      mystate.bar += '++'
    }, 2000);


    return {
      ...mystate,
      ...stateAsRefs,
      inputRef
    }
  },
}


</script>

<style scoped>

</style>
